<template>
  <div class="text-10">
    <div class="mb-8">
      <div
        class="handicap-data color_42 flex js-sp family-d align-center"
        v-for="(item, index) in state.sellList"
        v-show="index > 5"
        :key="index"
      >
        <!-- <div class="text-red w_80 text-left">
          {{ $t("deal.sell") + (6 - (index - 14)) }}
        </div> -->
        <div class="flex js-sp align-center flex-grow-1">
          <div class="text-left">{{ item.number }}</div>
          <div class="text-green">
            {{
              $currency(
                decimalDigitsInputFilter(item.price, gettrading?.price_accuracy)
              )
            }}
          </div>
        </div>
        <div class="text-right w_total"></div>
        <div
          class="hove-bg green-bg"
          :style="{ width: item.percentage * 100 + '%' }"
        ></div>
      </div>
    </div>
    <div
      class="flex align-base mb-8"
      :class="increase > 0 ? 'text-green' : 'text-red'"
    >
      <div class="text-left  family-d text-bolder text-14">
        {{
          $currency(
            decimalDigitsInputFilter(nowprice, gettrading?.price_accuracy)
          )
        }}
      </div>
      <div class="text-left family-d text-bolder text-12  mg-lf-sm">
        {{ (increase * 100).toFixed(2) }}%
      </div>
    </div>
    <div
      class="handicap-data color_42 flex js-sp align-center family-d text-10"
      v-for="(item, index) in state.buyList"
      v-show="index < 14"
      :key="index"
    >
      <!-- <div class="text-green w_80 text-left">
        {{ $t("deal.buy") + (index * 1 + 1) }}
      </div> -->

      <div class=" text-right w_total">
        <!-- {{
          $currency(
            decimalDigitsInputFilter(
              rideFix(
                rideFix(item.price, item.number),
                gettrading?.lever_hand_number
              ),
              gettrading?.price_accuracy
            )
          )
        }} -->
      </div>
      <div class="flex js-sp align-center flex-grow-1">
        <div class="text-red">
          {{
            $currency(
              decimalDigitsInputFilter(item.price, gettrading?.price_accuracy)
            )
          }}
        </div>
        <div class=" text-right">{{ $currency(item.number) }}</div>
      </div>
      <div
        class="hove-bg red-bg"
        :style="{ width: item.percentage * 100 + '%' }"
      ></div>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, watch, computed } from "vue";
import { numSort, decimalDigitsInputFilter } from "@/utils/common";
import { rideFix } from "@/utils/precisionMath.js";
import { useStore } from "vuex";

export default {
  name: "Handicap",
  props: {
    buylist: Array,
    selllist: Array,
    nowprice: Number,
    type: Number,
    increase: Number,
  },
  setup(props) {
    const state = reactive({
      buyList: [],
      sellList: [],
    });
    onMounted(() => {
      // getData();
    });
    const $store = useStore();
    const gettrading = computed(() => {
      console.log("lever_data", $store.state.exchange.lever_data);
      if (props.type === 1) {
        return $store.state.exchange.second_data;
      } else {
        return $store.state.exchange.lever_data;
      }
    });
    watch(props, (val) => {
      if (val.buylist) {
        state.buyList = numSort("desc", val.buylist, "price");
        state.sellList = numSort("desc", val.selllist, "price");
      }
    });

    return {
      state,
      rideFix,
      gettrading,
      decimalDigitsInputFilter,
    };
  },
};
</script>

<style scoped lang="less">
.w_total {
  width: 42%;
}
.handicap-data {
  height: 15px;
  line-height: 15px;
  position: relative;
}
.hove-bg {
  position: absolute;
  opacity: 0.2;
  height: 100%;
  right: -10px;
  top: 0;
}
.is-rtl {
  .hove-bg {
    left: -10px;
    right: 0;
    top: 0;
  }
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-4 {
  margin-bottom: 4px;
}
.right {
  width: 30px;
}
.w_80 {
  width: 80px;
}
</style>
